<template>
	<view class="register">
		<Title :txt="'忘记密码'" :showback="true"></Title>
		<view class="registerform">

			<view class="formitem fcs border-bottom">
				<view class="textr f14">+86</view><input   class="f14" maxlength="11" placeholder="请输入手机号" v-model="tel" /><button :class="!btnfalse?'buttonable':'buttondisable'"  @click="getCode">{{codeText}}</button>
			</view>

			<view class="formitem fcs border-bottom">
				<view class="textr">验证码</view> <input type="number"  class="f12" maxlength="6" placeholder="请输入短信验证码" v-model="code" />		
			</view>
			<view class="formitem fcs border-bottom">
				<view class="textr f14">登录密码</view> <input :disabled="intdisabled" :type="logstate?'text':'password'"  placeholder-style="color:#ddd;" class="f14 inputhez"  placeholder="请输入登录密码" v-model="loginword" />		<image e :src="logstate ? '../../static/closeeye.png' : '../../static/openeye.png'" style="width:36rpx ;height:36rpx ;margin-left: 64rpx;position: absolute;
			    right: 0;" @click="eyesin('logstate')"></image>
			</view>
			<view class="formitem fcs border-bottom">
				<view class="textr f14">确认密码</view> <input :disabled="intdisabled"  :type="logpaystate?'text':'password'" placeholder-style="color:#ddd;" class="f14 inputhez"  placeholder="再次输入确认密码" v-model="reloginword" />		<image :src="logpaystate ? '../../static/closeeye.png' : '../../static/openeye.png'" mode="" style="width:36rpx ;height:36rpx ;margin-left: 64rpx;position: absolute;
			    right: 0;" @click="eyepaysin('logpaystate')"></image>
			</view>
			</view>
			<view class="loginbox f16" @click="modifyPassword()">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tel:"",
				code:"",
				loginword:"",
				reloginword:"",
				logstate: false,
				logpaystate:false,
				btnfalse: false,
				intdisabled: false,
				 count:60,
				 codeText:"获取验证码",
			}
		},
		onLoad() {
			
			
		},
		methods:{
			eyesin(state) {
				if (state == 'logstate') {
					this.logstate = !this.logstate;
				} else {
					this.passtate = !this.passtate;
				}
			},
			eyepaysin(state){
				if (state == 'logpaystate') {
					this.logpaystate = !this.logpaystate;
				} else {
					this.logpaystate = !this.logpaystate;
				}
			},
			gotoLogin(){
				uni.reLaunch({
					url:"../login/index"
				})
			},
			getCode(){
				var that=this
				if (!that.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return false;
				}
				that.disabled = true;
				that.intdisabled = false;
				that.btnfalse = true;
				clearInterval(that.time);
				that.time = setInterval(() => {
					that.count -= 1;
					that.codeText = that.count + 's后获取';
					if (that.count === 0) {
						that.count = 60;
						that.disabled = false;
						that.btnfalse = false;
						that.codeText = '获取验证码';
						clearInterval(that.time);
					}
				}, 1000);
					let params = {
						phone:that.tel
					};
				that.$http.post('login.sendForgotSms',params,{ isAuth: false, tipConfig: { isLoading: false } }).then(res=>{
					that.disabled = true;
					that.intdisabled = false;
					that.btnfalse = true;
					clearInterval(that.time);
					that.time = setInterval(() => {
						that.count -= 1;
						that.codeText = that.count + 's后获取';
						if (that.count === 0) {
							that.count = 60;
							that.disabled = false;
							that.btnfalse = false;
							that.codeText = '获取验证码';
							clearInterval(that.time);
						}
					}, 1000);
				})
			},
		async modifyPassword(){
				if(!this.code){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				if(!this.code){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.loginword)){
				uni.showToast({
					title: '请输入最少8位字母+数字',
					icon: 'none'
				});
				return false;
				}
				if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.reloginword)){
				uni.showToast({
					title: '请输入最少8位字母+数字',
					icon: 'none'
				});
				return false;
				}
				if(this.loginword!==this.reloginword){
					uni.showToast({
						title: '两次密码须一致',
						icon: 'none'
					});
					return false
				}
				let params={
					phone:this.tel,
					loginPwd:this.loginword,
					confirmLoginPassworld:this.reloginword,
					verificationCode:this.code
				}
								let res =await this.$http.post('login.forgotPassword',params)
					// console.log(res)
					
					if(res.code==200){
						
						setTimeout(() => {
							uni.navigateTo({
								url: '../login/index'
							});
						}, 500);	
					}
			}
		}
	}
</script>

<style lang="less">
	.register{
		.inputhez{
			border: none;
			outline: none;
		}
		.buttonable{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: #1372df;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			position: absolute;
			    right: 0;
				padding: 0;
		}
		.buttondisable{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: rgba(239,239,239,1);
			border-radius: 8rpx;
			font-size: 24rpx;
			color: rgba(109,114,120,1);
			position: absolute;
			    right: 0;
				padding: 0;
		}
		margin-top: 40rpx;
		.back{
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 40rpx;
			margin-left: 30rpx;
			font-weight: 500;
			position: relative;
			.leftarrow{
				position: absolute;
				left: 0;
				top:0;
				font-size:40rpx
			}
		}
		.logobox{
			margin-top: 46rpx;
			margin-left: auto;
			margin-right: auto;
			width: 204rpx;
			height: 278rpx;
			image{
				width:204rpx;
				height: 278rpx;
			}
		}
		.registerform{
			margin-top: 88rpx;
			padding: 0 30rpx;
		}
		button{
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			opacity: 1;
			background: #1372df;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			position: absolute;
			padding: 0;
			    right: 0;
		}
		input{
			width: 310rpx;
			font-size: 14px;
		}
		.gologinbox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 60rpx;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			width: 340rpx;
			font-size: 36rpx;
			.login{
				display: flex;
				font-size: 36rpx;
				justify-content: space-between;
				align-items: center;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #1372DF;
				
			}
			image{
				width: 28rpx;
				height: 40rpx;
				margin-top: 8rpx;
			}
		}
		
	}
</style>
